<!--统计图页面-->
<template>
  <el-card shadow="never" class="aui-card--fill" style="background-color: #f5f5f5;">
    <div class="flex_rows flex_center flex_wrap">
      <div class="flex_columns flex_jufy_center"  v-for="(item,index) in statUserList" :key="item.key"
           style="background-color: #FFFFFF;padding: 20px;margin-bottom: 20px;margin-right:20px;border-radius: 5px;" v-if="item.key">
        <div style="font-size: 20px;">{{item.key}}</div>
        <div style="font-size: 36px;margin-top: 20px;">{{formatNumber(item.value,true)}}</div>
      </div>
      <div class="flex_columns flex_jufy_center"  v-for="(item,index) in statOrderList" :key="item.key"
           style="background-color: #FFFFFF;padding: 20px;margin-bottom: 20px;margin-right:20px;border-radius: 5px;" v-if="item.key">
        <div style="font-size: 20px;">{{item.key}}</div>
        <div style="font-size: 36px;margin-top: 20px;">{{formatNumber(item.value,true)}}</div>
      </div>
    </div>
<!--    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">-->
<!--      <div class="" id="four" style="height: 650px;background-color: #FFFFFF;padding: 20px;"></div>-->
<!--    </el-col>-->
<!--    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">-->
<!--      <div class="" id="one" style="height: 600px;background-color: #FFFFFF;padding: 20px;"></div>-->
<!--    </el-col>-->
<!--    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">-->
<!--      <div class="" id="two" style="height: 600px;background-color: #FFFFFF;padding: 20px;"></div>-->
<!--    </el-col>-->
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
import mixinViewModule from '@/mixins/view-module'
import {formatNumber} from "../../utils";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/statOrder',
        getDataListIsPage: false,
        deleteURL: '/api/shopInfo',
        createdIsNeed: false,       // 此页面是否在创建时，调用查询数据列表接口？
      },
      statUserList: [],             //查询用户相关指标
      statOrderList: [],            //查询订单相关指标
      fourList:[]
    }
  },
  components: {
  },
  created() {
  },
  mounted() {
    this.statUser()
    this.statOrder()
  },
  methods:{
    formatNumber,
    //统计排名数据
    getRanking(){
      var chartDom = document.getElementById('four');
      var myChart = echarts.init(chartDom);
      var option;
      const countryColors = ['#080E40','#2C2E78','#2250A5','#346C9B','#003D73','#2775B7','#2586B9','#8FB2C8','#2675AE','#68AACA',]

      option = {
        title: {
          text: '业绩排名'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: [],
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: [],
            itemStyle: {
              color: function (param) {
                return countryColors[param.dataIndex] || '#5470c6';
              }
            },
          },
        ]
      };
      /* 按距离大小排序 */
      this.fourList.sort((a, b) => {
        return Number(a.performance) > Number(b.performance) ? 1 : -1;
      })
      this.fourList.forEach(item=>{
        option.yAxis.data.push(item.nickname)
        const num = Number(item.performance)
        option.series[0].data.push(num)
      })
      debugger
      option && myChart.setOption(option);

    },
    //查询用户相关指标
    statUser() {
      // const myEchart3 = echarts.init(document.getElementById('two'))
      const option = {
        title: {
          text: '用户变化统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }
      this.statUserList = []
      this.fourList = []
      this.$http.get(`/api/statUser`).then(({data: res}) => {
        // console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.statUserList.push(res.data.count)
        this.statUserList.push(res.data.sumAvailableEdouNum)
        this.statUserList.push(res.data.sumAvailablePointsNum)
        res.data.performanceSort.value.forEach((item,index)=>{if (index<10 ){this.fourList.push(item)}})
        // this.getRanking()
        const createDate = res.data.createDate
        createDate.forEach(item=>{
          option.xAxis.data.push(item.key)
          const num = Number(item.value)
          option.series[0].data.push(num)
        })
        debugger
        // myEchart3.setOption(option)
      }).catch(() => {})
    },
    //查询订单相关指标
    statOrder() {
      // const myEchart = echarts.init(document.getElementById('one'))
      const option = {
        title: {
          text: '订单状态统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }
      this.statOrderList = []
      this.$http.get(`/api/statOrder`).then(({data: res}) => {
        // console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.statOrderList.push(res.data.orderCount)
        this.statOrderList.push(res.data.sumTotalAmount)
        const list = res.data.orderStatus
        list.forEach(item=>{
          option.xAxis.data.push(item.key)
          const num = Number(item.value)
          option.series[0].data.push(num)
        })
        debugger
        // myEchart.setOption(option)
      }).catch(() => {
      })
    },
  }
}
</script>
